<template>
  <div id="root">
    <div id="container">
      <div class="wrap">
        <list-header @searchUser="searchUser" />
        <user-list
          :items="userList"
          :itemBtn="itemBtnName"
          :haveMore="haveMore"
          @showMore="showMore"
          className="btn-class"
        />
        <list-footer
          :items="userList"
          :itemBtn="itemBtnName"
          @changeAllDone="changeAllDone"
          @clearAllTodo="clearAllTodo"
          className="btn-class"
        />
      </div>
    </div>
  </div>
</template>

<script>
import ListHeader from "@/components/userData/ListHeader.vue";
import ListFooter from "@/components/userData/ListFooter.vue";
import UserList from "@/components/userData/UserList.vue";
import { addAdmin, addAdmins, getUserList } from "@/api/userManage";

export default {
  name: "UserData",
  components: {
    ListHeader,
    ListFooter,
    UserList,
  },
  data() {
    return {
      userList: [],
      itemBtnName: "成为管理员",
      //   定义一个分页对象，保存分页的总页数等数据
      pageInfo: {
        //   总页数
        totalPage: "",
        //   当亲页码
        pageNum: 0,
      },
      // 懒加载标签
      haveMore: false,
      keyword: "",
    };
  },
  methods: {
    //   对后端接口返回的每个数据对象添加一个字段：seleted  受否勾选
    addSeleted(dataList) {
      const data = dataList.filter((user) => {
        user.seleted = false;
        return true;
      });
      return data;
    },

    // 设置为管理员
    async setAdmin(id) {
      const state = (await addAdmin(id)).code;
      console.log(state);
      if (state == 200) {
        this.userList = this.userList.filter((item) => item.id !== id);
      }
    },

    // 按item名字进行正则表达式匹配搜索
    async searchUser(keyword) {
      // 记录当前搜索栏的关键字
      this.keyword = keyword;
      const APIData = (await getUserList(keyword, 1)).data;
      //   接收数据不为空
      if (APIData.userList.length > 0) {
        this.userList = this.addSeleted(APIData.userList);
        this.pageInfo.totalPage = APIData.pageInfo.totalPage;
        this.pageInfo.pageNum = 1;
      }
      console.log("=====搜索用户结果：", this.userList);
      //   控制是否还能继续加载
      if (this.pageInfo.totalPage > this.pageInfo.pageNum) {
        this.haveMore = true;
      } else {
        this.haveMore = false;
      }
      //   调用后端接口，传入keyword进行模糊查询
    },

    async showMore() {
      // 还是使用上一个搜索API，只是开始的页码变了
      const APIData = (
        await getUserList(this.keyword, this.pageInfo.pageNum + 1)
      ).data;
      this.userList = this.userList.concat(this.addSeleted(APIData.userList));
      //   当前页码加一
      this.pageInfo.pageNum += 1;
      if (this.pageInfo.totalPage > this.pageInfo.pageNum) {
        this.haveMore = true;
      } else {
        this.haveMore = false;
      }
    },
    // 勾选 or 取消勾选
    checkItem(id) {
      this.userList.forEach((item) => {
        if (item.id === id) item.seleted = !item.seleted;
      });
    },
    // 全选 or 全不选
    changeAllDone(value) {
      this.userList.forEach((item) => (item.seleted = value));
    },

    // 添加管理已选择所有的item
    async clearAllTodo() {
      const idList = [];
      this.userList.forEach((user) => {
        if (user.seleted) {
          idList.push(user.id);
        }
      });
      const state = (await addAdmins(idList)).code;
      if (state == 200) {
        this.userList = this.userList.filter((item) => !item.seleted);
      }
      // 调用后端接口成功操作才改变数据模板的数据

      console.log(this.userList);
    },
  },
  mounted() {
    // 挂载全局事件总线，供每个item回调
    // 为了UserItem组件的复用，给按钮触发的事件统一命名为 buttonHandleMethod
    this.$bus.$on("buttonHandleMethod", this.setAdmin);
    this.$bus.$on("checkItem", this.checkItem);
  },
};
</script>

<style scoped>
#root {
  height: 100%;
  background-color: #fff;
  /* 清除外边距塌陷 */
  overflow: hidden;
}

body {
  background: #fff;
}

.btn-class {
  color: #fff;
  background-color: skyblue;
  border: 1px solid rgb(85, 167, 199);
}
.btn-edit {
  color: #fff;
  background-color: skyblue;
  border: 1px solid rgb(85, 167, 199);
  margin-right: 3px;
}

.btn-class:hover {
  color: #fff;
  background-color: #3094eb;
}

.btn:focus {
  outline: none;
}

/* #container {
  width: 80%;
  margin: 30px auto;
} */
#container .wrap {
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>